import React, { useRef, useState } from 'react';
import { Modal, Button } from 'antd-mobile';
// import * as XLSX from 'xlsx';

interface ImportExcelModalProps {
    visible: boolean;
    onClose: () => void;
    onImport: (file: File) => void; // 这里是 File
}

const ImportExcelModal: React.FC<ImportExcelModalProps> = ({
    visible,
    onClose,
    onImport
}) => {
    const [dragActive, setDragActive] = useState(false);
    const fileInputRef = useRef<HTMLInputElement>(null);

    // 解析Excel文件
    const handleFile = (file: File) => {
        onImport(file);
        onClose();
    };

    // 拖拽事件
    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
        e.preventDefault();
        setDragActive(false);
        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
            handleFile(e.dataTransfer.files[0]);
        }
    };

    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
        e.preventDefault();
        setDragActive(true);
    };
    const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
        e.preventDefault();
        setDragActive(false);
    };

    // 文件选择
    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length > 0) {
            handleFile(e.target.files[0]);
        }
    };

    const onClone = () => {
        onClose();
    }
    return (
        <Modal
            visible={visible}
            content={
                <div>
                    <div
                        style={{
                            border: dragActive ? '2px dashed #1677ff' : '2px dashed #ccc',
                            borderRadius: 8,
                            padding: 32,
                            textAlign: 'center',
                            background: dragActive ? '#e6f7ff' : '#fff',
                            transition: 'all 0.2s'
                        }}
                        onDrop={handleDrop}
                        onDragOver={handleDragOver}
                        onDragLeave={handleDragLeave}
                        onClick={() => fileInputRef.current?.click()}
                    >
                        <div style={{ fontSize: 13, color: 'red' }}>
                            拖拽Excel文件到此处，或点击选择文件
                        </div>
                        <input
                            ref={fileInputRef}
                            type="file"
                            accept=".xlsx, .xls"
                            style={{ display: 'none' }}
                            onChange={(e) => handleFileChange(e)}
                        />
                    </div>
                    {/* 退出按钮放到弹窗内容里 */}
                    <Button
                    onClick={onClone}
                    >退出</Button>
                </div>
            }
        />
    )
}

export default ImportExcelModal;